<template>
  <div>
    <div id="myChart1"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 绘制的数据
      list: [],
      drawing: {
        title: {
          text: "",
        },
        tooltip: {},
        legend: {
          // data: ["预算分配（Allocated Budget）"],
        },
        radar: {
          name: {
            textStyle: {
              color: "#fff",
              backgroundColor: "#999",
              borderRadius: 3,
              padding: [3, 5],
            },
          },
          indicator: [
            // { name: "销售（sales）", max: 50 },
            // { name: "管理（Administration）", max: 50 },
            // { name: "信息技术（Information Techology）", max: 50 },
          ],
        },
        series: [
          {
            // name: "预算 vs 开销（Budget vs spending）",
            type: "radar",
            areaStyle: { normal: {} },
            data: [
              {
                value: [],
                // 绑定成为当前多选题的题目
                // name: "预算分配（Allocated Budget）",
              },
            ],
          },
        ],
      },
    };
  },
  methods: {
    drawLine() {
      // 基于准备好的dom，初始化echarts实例
      let myChart = this.$echarts.init(document.getElementById("myChart1"));
      myChart.setOption(this.drawing);
      
    },
    updateData(value) {
      this.list = value;
      // 清空之前的数据
      this.drawing.radar.indicator = [];
      this.drawing.series[0].data[0].value = [];
      this.list.forEach((element) => {
        //   max:50是可以修改的
        this.drawing.radar.indicator.push({ name: element.name, max: 50 });
        this.drawing.series[0].data[0].value.push(element.value);
      });
        this.drawLine();
    },
  },
  // 挂载
  mounted() {},
};
</script>
<style scoped>
#myChart1 {
  height: 450px;
  width: 700px;
}
</style>